<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  #wrap {
    width: 100%;
    height: 100vh;
    background-color: #87CEEB;
    display: flex;
  }

  ul {
    width: 25%;
    height: 100vh;
    background-color: #008B8B;
  }

  ul li {
    width: 100%;
    height: 80px;
    border-top: 2px solid #f3f3f3;
    background-color: #00FFFF;
    text-align: center;
    line-height: 80px;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
  }

  ul li:first-of-type {
    margin-top: 50px;
  }

  ul li:last-of-type {
    border-bottom: 2px solid #f3f3f3;
  }

  .active {
    background-color: #9932CC;
    color: white;
  }

  #content {
    width: 75%;
    height: 100vh;
  }

  #content>div {
    display: none;
  }

  table {
    text-align: center;
  }
</style>

<body>
  <div id="wrap">
    <ul>
      <li class="active">首页</li>
      <li>添加用户</li>
      <li>用户列表</li>
      <li>用户查询</li>
    </ul>
    <div id="content">
      <div id="first" style="display: block;">
        <h1>首页</h1>
      </div>

      <div id="second">
        用户名: <input type="text" id="username">
        <button id="add">添加用户</button>
      </div>

      <div id="third">
        <input type="text" id="searchText">
        <button id="search">搜索</button>
        <table border="1">
          <thead>
            <tr>
              <th>用户id</th>
              <th>用户名</th>
              <th>操作</th>
              <th>移动</th>
            </tr>
          </thead>
          <tbody id="mybody">
            <!-- <tr class="tr_one">
              <td>用户id</td>
              <td>用户名</td>
              <td><button onclick="del()">del</button></td>
              <td><button onclick="upAndDown()">上移</button>
                <button onclick="upAndDown()">下移</button></td>
            </tr> -->
          </tbody>
        </table>
      </div>

      <div id="fourth">
        <h2>用户查询</h2>
      </div>
    </div>
  </div>
  <script>
    var lis = document.querySelectorAll("ul li")
    var divs = document.querySelectorAll("#content>div")
    // console.log(lis,divs);
    for (var i = 0; i < lis.length; i++) {
      lis[i].index = i;
      lis[i].onclick = function () {
        for (var j = 0; j < lis.length; j++) {
          lis[j].className = "";
          divs[j].style.display = "none";
        }
        this.className = "active";
        divs[this.index].style.display = "block";
      }
    }

    if (!localStorage.testlist) {
      localStorage.testlist = JSON.stringify([]);
    }

    var add = document.getElementById("add");
    add.onclick = function () {
      if (username.value) {
        obj = {
          id: new Date().getTime(),
          username: username.value
        }
        var arr = JSON.parse(localStorage.testlist);
        arr.push(obj);
        localStorage.testlist = JSON.stringify(arr);
        show(arr);
        username.value = "";
        divs[1].style.display = "none";
        divs[2].style.display = "block";
        lis[1].className = "";
        lis[2].className = "active";
      } else {
        alert("补全信息")
      }
    }

    function show(arr) {
      var str = ``;
      for (var i = 0; i < arr.length; i++) {
        str += `
        <tr class="tr_one">
              <td>${arr[i].id}</td>
              <td>${arr[i].username}</td>
              <td><button onclick="del(${arr[i].id})">删除</button></td>
              <td><button ${i == 0 ? 'disabled':''} onclick="upAndDown(${i},'up')">上移</button>
                <button ${i == arr.length-1 ? 'disabled':''} onclick="upAndDown(${i},'down')">下移</button></td>
            </tr>
        `
      }
      var mybody = document.getElementById("mybody")
      mybody.innerHTML = str;
    }
    show(JSON.parse(localStorage.testlist))

    function del(id) {
      var arr = JSON.parse(localStorage.testlist)
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].id == id) {
          arr.splice(i, 1);
        }
      }
      localStorage.testlist = JSON.stringify(arr)
      show(arr)
    }

    function upAndDown(i, status) {
      var arr = JSON.parse(localStorage.testlist)
      var temp = arr[i];
      // for (var i = 0;i<arr.length;i++){
      if (status == "up") {
        arr[i] = arr[i - 1];
        arr[i - 1] = temp
      } else if (status == "down") {
        arr[i] = arr[i + 1];
        arr[i + 1] = temp;
      }
      // }
      localStorage.testlist = JSON.stringify(arr)
      show(arr)
    }
    var searchText = document.getElementById("searchText")
    var search = document.getElementById("search")
    search.onclick = function () {
      var arr = JSON.parse(localStorage.testlist)
      var myarr = arr.filter(function (ele) {
          return ele.username == searchText.value;
      })
      show(myarr)
      // console.log(myarr);
    }
  </script>
</body>

</html>